{% extends 'globalPage.html' %}
<title>{% block title %}播放记录{% endblock %}</title>
{% block body %}
    <nav class="navbar navbar-default" style="margin: 0">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <a class="navbar-brand" style="padding: 0;" href="{% url 'home' %}"><img style="height: 50px;"
                                                                                         src="/static/image/logo.png"
                                                                                         alt="Band"></a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="{% url 'home' %}">首页</a></li>
                    <li><a href="{% url 'courses' 'firstGrade' 'allCourses' 1 %}">全部课程</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    {% if user.is_authenticated %}
                        <li><a href="javascript:;" style="margin-top: 5px">你好，{{ user.first_name }}</a></li>
                        <li class="dropdown">
                            <a id="dLabel" data-target="#" href="javascript:;" data-toggle="dropdown"
                               role="button" aria-haspopup="true" aria-expanded="false">
                                <img class="img-circle" src="/static/image/Head.jpg" alt="head"
                                     style="height: 30px;">
                            </a>
                            <ul class="dropdown-menu" aria-labelledby="dLabel">
                                <li><a href="{% url 'personalCenter' %}" style="text-align: center">个人中心</a></li>
                                <li><a href="{% url 'history' %}" style="text-align: center">播放历史</a></li>
                                <li><a href="{% url 'logout' %}" style="text-align: center">退出登陆</a></li>
                            </ul>
                        </li>
                    {% else %}
                        <li><a href="{% url 'login' %}">登陆/注册</a></li>
                    {% endif %}
                </ul>
            </div>
        </div>
    </nav>
    <div class="container" style="background: white; margin-top: 50px; padding: 20px 30px 50px 20px">
        <h2 class="nav navbar-nav navbar-left"><img style="margin-right:10px;width: 30px;"
                                                    src="/static/image/play_history.png" alt="">播放历史</h2>
        <div class="nav navbar-nav navbar-right">
            <input class="btn btn-info" type="button" onclick="clearAll()" value="清空历史">
        </div>
    </div>
    <div id="play_history" class="container" style="background: white; min-height: 500px">
        {% csrf_token %}
    </div>
{% endblock %}
{% block jsOfPage %}
    <script>
        $.ajax({
            url: "{% url 'history' %}",
            type: "POST",
            data: {
                "csrfmiddlewaretoken": $('input[name="csrfmiddlewaretoken"]').val()
            },
            success: function (data) {
                $("#play_history").html(data);
            }
        });

        // 清除一个播放历史记录请求
        function clearOne(value) {
            $.ajax({
                url: "{% url 'clearOne' %}",
                type: "POST",
                data: {
                    "csrfmiddlewaretoken": $('input[name="csrfmiddlewaretoken"]').val(),
                    "courses_id": value
                },
                success: function (data) {
                    $("#play_history").html(data);
                }
            });
        }

        // 清空播放历史记录请求
        function clearAll() {
            $.ajax({
                url: "{% url 'clearAll' %}",
                type: "POST",
                data: {
                    "csrfmiddlewaretoken": $('input[name="csrfmiddlewaretoken"]').val()
                },
                success: function (data) {
                    $("#play_history").html(data);
                }
            })
        }
    </script>
{% endblock %}